<template>
  <div class="timeline-container" ref="timelineContainer">
    <div class="timeline-title">中国茶文化发展历程</div>
    <div class="timeline-content" ref="timelineContent">
      <div class="timeline-item" v-for="(item, index) in timelineData" :key="index">
        <div class="timeline-dot"></div>
        <div class="timeline-line" v-if="index !== timelineData.length - 1"></div>
        <div class="timeline-info">
          <div class="timeline-year">{{ item.year }}</div>
          <div class="timeline-event">{{ item.event }}</div>
        </div>
      </div>
      <!-- 复制一份数据用于循环滚动 -->
      <div class="timeline-item" v-for="(item, index) in timelineData" :key="index + 'copy'">
        <div class="timeline-dot"></div>
        <div class="timeline-line" v-if="index !== timelineData.length - 1"></div>
        <div class="timeline-info">
          <div class="timeline-year">{{ item.year }}</div>
          <div class="timeline-event">{{ item.event }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const timelineContainer = ref(null)
const timelineContent = ref(null)
let scrollInterval = null

const timelineData = ref([
  {
    year: '公元前2737年',
    event: '神农尝百草，发现茶叶的药用价值'
  },
  {
    year: '公元前1046年',
    event: '周朝时期，茶叶开始作为贡品'
  },
  {
    year: '公元前221年',
    event: '秦朝时期，茶叶开始作为饮品'
  },
  {
    year: '公元618年',
    event: '唐朝时期，陆羽著《茶经》，茶文化开始形成，盛行煮茶，将茶饼碾碎后与水同煮，常添加佐料调味'
  },
  {
    year: '公元960年',
    event: '宋朝时期，盛行点茶，将茶末置于茶盏，以沸水冲点并搅拌出沫饽'
  },
  {
    year: '公元1368年',
    event: '明朝时期，开创沸水直接冲泡散茶的瀹饮法，散茶开始流行，茶具艺术发展'
  },
  {
    year: '公元1644年',
    event: '清朝时期，六大茶类基本形成，以清饮泡茶为主，注重茶叶本味'
  },
  {
    year: '公元1949年',
    event: '新中国成立后，茶产业现代化发展，饮茶方式呈现多元化，既有传统清饮，也有袋泡、冷泡、调饮等创新形式'
  }
])

const startAutoScroll = () => {
  let scrollPosition = 0
  const scrollStep = 1
  const scrollDelay = 50

  scrollInterval = setInterval(() => {
    if (timelineContainer.value && timelineContent.value) {
      const containerHeight = timelineContainer.value.clientHeight
      const contentHeight = timelineContent.value.scrollHeight / 2 // 因为内容复制了一份
      
      if (scrollPosition >= contentHeight) {
        scrollPosition = 0
        timelineContainer.value.scrollTop = 0
      } else {
        scrollPosition += scrollStep
        timelineContainer.value.scrollTop = scrollPosition
      }
    }
  }, scrollDelay)
}

onMounted(() => {
  startAutoScroll()
})

onUnmounted(() => {
  if (scrollInterval) {
    clearInterval(scrollInterval)
  }
})
</script>

<style scoped>
.timeline-container {
  width: 100%;
  height: 100%;
  background: rgba(0, 20, 50, 0.5);
  border-radius: 8px;
  padding: 15px;
  color: #fff;
  overflow-y: hidden;
  scroll-behavior: smooth;
}

.timeline-title {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #32ccee;
}

.timeline-content {
  position: relative;
  padding-left: 20px;
}

.timeline-item {
  position: relative;
  padding-bottom: 20px;
}

.timeline-dot {
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #32ccee;
  border: 2px solid #fff;
}

.timeline-line {
  position: absolute;
  left: -4px;
  top: 12px;
  width: 2px;
  height: calc(100% - 12px);
  background: #32ccee;
}

.timeline-info {
  margin-left: 20px;
}

.timeline-year {
  font-size: 14px;
  font-weight: bold;
  color: #32ccee;
  margin-bottom: 5px;
}

.timeline-event {
  font-size: 12px;
  line-height: 1.5;
}

/* 滚动条样式 */
.timeline-container::-webkit-scrollbar {
  width: 6px;
}

.timeline-container::-webkit-scrollbar-thumb {
  background: #32ccee;
  border-radius: 3px;
}

.timeline-container::-webkit-scrollbar-track {
  background: rgba(0, 20, 50, 0.3);
}

.timeline-content-clone {
  position: relative;
  padding-left: 20px;
}

/* 其他原有样式保持不变 */
</style>